<template>
	<theme-box title="图文消息" theme="primary">
		<div class="alert alert-default">
			<form class="form-inline clearfix" @submit.prevent v-el:searchform>
				<div class="form-group">
					<label>标题：</label>
					<input type="text" class="form-control" v-el:searchname>
				</div>
				<v-button theme="primary" @click="search">查询</v-button>
				<v-button theme="warning" @click="clear">重置</v-button>
				<v-button v-token.literal="新建图文功能" theme="danger" class="pull-right" @click="open">新增图文</v-button>
			</form>
		</div>
		<style>
			.box.img-responsive {
				width: 100%;
				height: 160px;
				-webkit-background-size: cover;
				-moz-background-size: cover;
				background-size: cover;
				background-position: center center;
			}
		</style>
		<div class="clearfix">
			<photo-item v-for="item in list">
				<div  v-if="item.url.trim()!=''"  class="box img-responsive" :style="{ 'background-image': 'url(' + item.url + ')' }"></div>
				<div  v-else class="placeholder-cover box img-responsive">
				</div>
				<h4 class="clearfix">
					  <span class="pull-left">{{item.name}}</span>
						<!-- <span class="pull-right">作者</span> -->
				</h4>
				<h4>
					  {{filterTime(item.createTime)}}
				</h4>

				<v-button style="success" @click="edit(item)">
					<i class="fa fa-edit fa-1x"></i>
				</v-button>

				<v-button theme="danger" @click="remove(item)">
					<i class="fa fa-remove fa-1x"></i>
				</v-button>
			</photo-item>
			<create-modal v-ref:modal></create-modal>
		</div>
		<app-page v-ref:page></app-page>

	</theme-box>
</template>

<style>
	#filter-items .item {
		margin-bottom: 20px;
	}
</style>
<script>

	import Modal from 'pages/partial/graphic.create.vue';
  import Page from 'pages/partial/page.vue';
	import {dateFormat} from 'lib/method.js';
	
	export default {
		data: () => ({
			list: []
		}),	
		components: {
			'create-modal': Modal,
			'app-page': Page
		},
		events: {
			'pagination': 'search',
			'edit-done': 'search',
			'upload-done': 'search'
		},
		methods: {
			filterTime(datetime) {
				 return dateFormat(datetime)
			},
			edit(item) {
				let self = this;
				let data = {
					artId: item.artId
				};
				let id = item.id;

				//获得图文信息
				self.$post({
					url: '/api/v1' + projectName_Url + '/wechat/media/querydef.html',
					data
				}).then(response=>{
					//设置信息
					//let arr = [];
					let arr = response.content;
					let picIdArr = [];
					let picUrlArr = [];
					if(!arr) {
						console.error('content－无内容')
						return false;
					}
					arr.forEach(json =>{
						if(json.picUrl.trim() == '') {
							json.show_cover_pic = 0;
						} else {
							json.show_cover_pic = 1;
						}
						picUrlArr.push(json.picUrl);
						json.content_source_url = json.picUrl;
						delete json.picUrl;

						picIdArr.push(json.localPicId);
						delete json.localPicId;

						json.thumb_media_id = json.thumbMediaId;
						delete json.thumbMediaId;

						delete json.id;
						delete json.description;
						delete json.url;
					})
					self.$refs.modal.editInit(arr,id,picIdArr,picUrlArr);

				},response=>{

				});

			},
			remove(item) {
				let message = {
					title: "操作提示",
					content: "您确认要删除该图文？"
				}
				let data = {
					media: item.id.media,
					mchtIdFlag: item.id.mchtId
				}
				let self = this;
				Midway.confirm(message).then(function() {

					self.$post({
						url: '/api/v1' + projectName_Url + '/wechat/media/del.html',
						data
					}).then(response=>{
						let message = {
							title:"操作提示",
							content:"删除成功"
						}
						Midway.alert(message);
						//self.list.$remove(item);
						self.search();
					},response=>{

					});

				})
			},
			open() {
				this.$refs.modal.init();
			},
			search() {
				let data = {};
				if(this.$els.searchname.value) {
					data.name = this.$els.searchname.value;
				}

				data.aoData = this.$refs.page.setData();
				this.$search({
					url: '/api/v1' + projectName_Url + '/wechat/media/newsQuery.html',
					data
				}).then(response=>{
				  let total = response.content.total;
					this.$refs.page.init(total);
					this.$set("list",response.content.newsList);
				},response=>{

				});
			},
			clear() {
				this.$els.searchname.value='';
				this.search();
			}
		},
		ready() {
			this.search();
		}
	}
</script>
